<template>
  <el-container class="home-container">
    <el-header class="header-wrapper">
      <div class="logo"></div>
      <div class="header-nav"></div>
      <div class="header-right">
        <!--    <el-popover
          placement="bottom"
          width="200"
          trigger="hover"
          @show="userinfo_active = !userinfo_active"
          @hide="userinfo_active = !userinfo_active"
        >
          <div class="userinfo-solt" slot="reference">
            <span class="username">最爱有道士</span>
            <i class="el-icon-arrow-down solt-icon" :class="userinfo_active?'active':''"></i>
          </div>
           <div>
            12344555
            <div>dfsfsd</div>
          </div> 
        </el-popover>-->

        <i class="el-icon-bell solt-icon tip-icon" title="操作记录"></i>

        <i class="el-icon-setting solt-icon setting-icon" title="系统设置"></i>
      </div>
    </el-header>

    <el-container class="body-container">
      <el-aside>
        <el-menu
          style="border:none"
          :default-active="nav_active"
          background-color="transparent"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <template v-for="(item,index) in items">
            <el-menu-item :index="item.index" :key="index" @click="toLink(index)">
              <i
                :class="item.icon"
                :style="{width:(index>0&&index<7?'29px':''),display:'inline-block'}"
              ></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
        <el-progress
          :stroke-width="8"
          color="rgb(28, 175, 253)"
          :percentage="percentage?percentage:0"
          :format="format"
        ></el-progress>
      </el-aside>

      <el-main>
        <router-view :key="Math.random()"></router-view>
      </el-main>
    </el-container>

    <vue-upload />
    <vue-move />
    <vue-share />
  </el-container>
</template>

<script>
//import upload from "@/components/Upload/upload";
import vueUpload from "@/components/Upload/vue-uploader";
import vueMove from "@/components/Move/vue-move";
import vueShare from "@/components/Share/vue-share";
import { mapState, mapMutations } from "vuex";
import { formatSize } from "@/utils/fileList.js";
import { userAPI } from "@/utils/api.js";
import Bus from "@/upload/bus.js";
export default {
  components: {
    vueUpload,
    vueMove,
    vueShare
  },
  data() {
    return {
      userinfo_active: false,
      //菜单栏
      items: [
        {
          icon: "el-icon-document",
          name: "all",
          type: "all",
          title: "全部文件",
          index: "all"
        },
        {
          icon: "",
          name: "classify",
          type: "doc",
          title: "文档",
          index: "doc"
        },
        {
          icon: "",
          name: "classify",
          type: "pic",
          title: "图片",
          index: "pic"
        },
        {
          icon: "",
          name: "classify",
          type: "seed",
          title: "种子",
          index: "seed"
        },
        {
          icon: "",
          name: "classify",
          title: "视频",
          type: "video",
          index: "video"
        },
        {
          icon: "",
          name: "classify",
          title: "音乐",
          type: "music",
          index: "music"
        },
        {
          icon: "",
          name: "classify",
          title: "其他",
          type: "other",
          index: "other"
        },
        {
          icon: "el-icon-share",
          name: "share",
          title: "我的分享",
          type: "share",
          index: "7"
        },
        {
          icon: "el-icon-delete",
          name: "recyclebin",
          title: "回收站",
          type: "share",
          index: "recycle"
        }
      ],
      current: 0,
      total: 1
    };
  },

  computed: {
    ...mapState({
      userInfo: state => state.userInfo.userInfo,
      userSize: state => state.userInfo.userSize,
      nav_active: state => state.page.leftNav
    }),
    percentage() {
      return (this.current * 100) / this.total;
    }
  },
  created() {
    this.current = this.userSize.currentSize;
    this.total = this.userSize.totalSize;
  },
  mounted() {
    this.toLink(0);
    Bus.$on("onGetUserSize", () => {
      this.getUserSize();
    });
  },
  methods: {
    ...mapMutations(["saveLeftNav"]),
    /**
     * 格式化容量单位
     */
    format() {
      return `${formatSize(this.current)}/${formatSize(this.total)}`;
    },
    /**
     * 重新获取容量
     */
    getUserSize() {
      userAPI.common
        .getContainerSize()
        .then(res => {
          this.current = res.data.currentSize;
          this.total = res.data.totalSize;
        })
        .catch(err => {
          console.log(err);
        });
    },
    toLink(index) {
      //sessionStorage.setItem("menu_index", index);
      //路由跳转处理
      //this.$router.push(link);
      //localStorage.setItem("type", this.items[index].type);
      let item = this.items[index];
      this.saveLeftNav(item.type);
      this.$router.replace({
        name: item.name,
        params: {
          type: item.type
        }
      });
    }
  },
  destroyed() {
    Bus.$off("onGetUserSize");
  }
};
</script>

<style lang="scss" scoped>
.header-wrapper {
  padding: 10px;
  .logo {
  }
  .header-nav {
  }
  .header-right {
    float: right;
    width: 196px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .solt-icon {
      font-weight: 700;
      font-size: 18px;
      vertical-align: text-bottom;
      margin-left: 8px;
      transition: transform 0.5s;
      cursor: pointer;
    }
    .tip-icon:hover,
    .setting-icon:hover {
      opacity: 0.8;
    }
    .userinfo-solt {
      .username {
      }
      .solt-icon.active {
        transform: rotateZ(180deg);
      }
    }
  }
}
.home-container {
  background: url("../assets/theme/main_bg.png") no-repeat center 0 / cover;
}
.body-container {
  padding-right: 10px;
}
.document-container {
  height: 100%;
  overflow: hidden;
}
</style>
<style lang="scss">
.el-container {
  height: 100%;
  width: 100%;
  background: transparent;
  overflow: hidden;
}
.el-header {
  background-color: transparent;
  height: 60px;
  color: #fff;
}

.el-aside {
  width: 194px !important;
  overflow: hidden;
  background: transparent;
}
.el-menu-item.is-active {
  background: rgba($color: #fff, $alpha: 0.2) !important;
}
.el-menu-item:hover {
  background: rgba($color: #fff, $alpha: 0.2) !important;
}
.el-menu-item i {
  color: #fff;
}
.el-progress.el-progress--line {
  width: 155px;
  margin: 25px auto 0;
  .el-progress-bar {
    padding-right: 0;
    margin-right: 0;
    .el-progress-bar__outer {
      background: rgba(0, 0, 0, 0.1);
    }
  }
  .el-progress__text {
    color: #fff;
    margin-left: 0;
    padding-top: 5px;
    font-size: 12px !important;
  }
}
.el-main {
  height: 100%;
  padding: 0 0 10px;
  background-color: #fff;
  overflow: auto;
}
</style>